<script lang="ts" setup>
import {reactive} from 'vue';
import { regionData } from 'element-china-area-data';
const handleChange = (value) => {
  console.log(value)
}

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-cascader
        placeholder="请选择地区"
        size="default"
        :options="regionData"
        @change="handleChange"
    >
    </el-cascader>
    <el-form-item label="省区">
      <el-select
          v-model="formInline.region"
          placeholder="Activity zone"
          clearable
      >
        <el-option label="Zone one" value="shanghai"/>
        <el-option label="Zone two" value="beijing"/>
      </el-select>
    </el-form-item>
    <el-form-item label="州市">
      <el-select
          v-model="formInline.region"
          placeholder="Activity zone"
          clearable
      >
        <el-option label="Zone one" value="shanghai"/>
        <el-option label="Zone two" value="beijing"/>
      </el-select>
    </el-form-item>
    <el-form-item label="区县">
      <el-select
          v-model="formInline.region"
          placeholder="Activity zone"
          clearable
      >
        <el-option label="Zone one" value="shanghai"/>
        <el-option label="Zone two" value="beijing"/>
      </el-select>
    </el-form-item>

    <el-form-item label="进出港">
      <el-select
          v-model="formInline.region"
          placeholder="进出港件"
          clearable
      >
        <el-option label="进港件" value="outwardParcel"/>
        <el-option label="出港件" value="intwardParcel"/>
        <el-option label="进出港件" value="inOutwardParcel"/>
      </el-select>
    </el-form-item>
    <el-form-item label="时间区间">
      <el-date-picker
          v-model="formInline.date"
          type="date"
          placeholder="开始日期"
          clearable
      />
      -
      <el-date-picker
          v-model="formInline.date"
          type="date"
          placeholder="结束日期"
          clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>